	import React, {useState} from "react";
import {Button, Form, Input, message, Modal, Select, Space, Spin} from "antd";
import {CheckOutlined, PoweroffOutlined} from "@ant-design/icons";
import styled from "@emotion/styled";
import {httpPost, Result} from "@/utils/http";
import {SoftwareProp} from "@/pages/software/store";

interface SoftwareModelProp {
	visible: boolean;
	onCancel: (isLoad: boolean) => void;
}


export const SoftwareAdd: React.FC<SoftwareModelProp> = ({visible, onCancel}) => {

	const [spinning, setSpinning] = useState<boolean>(false);
	const [form] = Form.useForm<SoftwareProp>();

	const submitEnd = () => {
		form.validateFields().then(value => {
			setSpinning(true);
			httpPost<Result<string>, any>('/software/create', {...value}).then(res => {
				if (res.code === 100200) {
					message.success(res.message);
					form.resetFields();
					onCancel(true);
				} else {
					message.error(res.message);
				}
			}).finally(() => {
				setSpinning(false);
			})
		})
	}

	const closeModel = () => {
		form.resetFields();
		onCancel(false);
	}

	const osChange = (value: string) => form.setFieldsValue({ os: value })

	return <Container
		width='30vw'
		destroyOnClose
		maskClosable={false}
		onCancel={() => onCancel(false)}
		open={visible}
		title="增加软件"
		okText="保存"
		cancelText="取消"
		footer={
			<Space>
				<Button type="primary" danger onClick={closeModel} icon={<PoweroffOutlined />}>关闭</Button>
				<Button type="primary" onClick={submitEnd} icon={<CheckOutlined />}>保存</Button>
			</Space>
		}
	>
		<Spin tip="加载中......" spinning={spinning}>
			<Form labelCol={{ span: 4 }}
						wrapperCol={{ span: 20 }}
						form={form}
						layout="horizontal"
						name="form_in_modal"
			>
				<Form.Item name="type_name" label="软件类型" rules={[{ required: true, message: '请输入软件类型' }]}>
					<Input placeholder="请输入软件类型" />
				</Form.Item>
				<Form.Item name="title" label="软件名称" rules={[{ required: true, message: '请输入软件' }]}>
					<Input placeholder="请输入软件" />
				</Form.Item>
				<Form.Item name="version" label="软件版本" rules={[{ required: true, message: '请输入版本' }]}>
					<Input placeholder="请输入版本" />
				</Form.Item>
				<Form.Item name="os" label="支持平台" rules={[{ required: true, message: '请选择平台' }]}>
					<Select
						defaultValue="Linux"
						onChange={osChange}
						style={{ width: '100%' }}
						options={[
							{ value: 'Linux', label: 'Linux' },
							{ value: 'Mac', label: 'Mac' },
							{ value: 'Windows', label: 'Windows' }
						]}
					/>
				</Form.Item>
				<Form.Item name="url" label="下载地址" rules={[{ required: true, message: '请输入下载地址' }]}>
					<Input placeholder="请输入下载地址" />
				</Form.Item>
			</Form>
		</Spin>
	</Container>

}

const Container = styled(Modal)`
	.ant-modal-body {
		margin-top: 30px;
	}
`
